<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>7进度条效果</title>
</head>
<style>
  .progress{
  
    background-color: #000;
    border-radius: 30px;
    height: 50px;
    width: 300px;
  }
  .inner{
    background-color: blue;
    border-radius: 30px;
    height: 50px;
    position: relative;
  }
  span{
    position: absolute;
    top: 100%;
    left: 100%;
    /* transform: translate(-50%,-50%); */
    color: black;
  }
</style>
<body>
  <div id="app">
    <!-- 外层盒子 底色  黑色 -->
    <div class="progress">
      <!-- 内层盒子 进度条 白色 -->
      <div class="inner" :style="{width:message}">
        <span>{{message}}</span>
      </div>
    </div>
    <br>
    <button @click="message='25%'">设置25%</button>
    <button @click="message='50%'">设置50%</button>
    <button @click="message='75%'">设置75%</button>
    <button @click="message='100%'">设置100%</button>
  </div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
        el: "#app",
        data: {
          message: "50%",
        },
        methods:{
          
        }
      });

</script>

</body>
</html>